import React from "react";
import { Button, Layout, Avatar, Dropdown } from "antd";
import "./index.css";
import { SearchOutlined } from "@ant-design/icons";
import { useDispatch } from 'react-redux'
import { collapseMenu } from "../../store/reducers/tab";

const { Header } = Layout;
const url = require("../../assets/user.png");
const CommonHeader = ({ collapsed }) => {
  // 创建dispatch
  const dispatch = useDispatch()
  const items = [
    {
      key: "1",
      label: (
        <a target="_blank" rel="noopener noreferrer">
          个人中心
        </a>
      ),
    },
    {
      key: "2",
      danger: true,
      label: (
        <a target="_blank" rel="noopener noreferrer" onClick={() => logout}>
          退出
        </a>
      ),
    },
  ];

  const logout = () => {};

  // 点击收起菜单
  const setCollapsed = () => {
    // dispatch 触发函数
    dispatch(collapseMenu(collapsed))
  };
  return (
    <Header className="header-container">
      <Button
        type="text"
        style={{
          fontSize: "16px",
          width: 64,
          height: 32,
          backgroundColor: "#fff",
        }}
        icon={<SearchOutlined />}
        onClick={ () => setCollapsed() }
      ></Button>
      <Dropdown menu={{ items }}>
        <Avatar src={<img src={url} alt="avatar" size={36} />} />
      </Dropdown>
    </Header>
  );
};

export default CommonHeader;
